跳至主要内容

[Vite] Vite創建Vue專案

TL;DR​

Vite簡介，以及使用Vite快速創建一個乾淨的Vue專案

參考資料​

相關連結​

Vite簡介​

Vite與Webpack相同，都會將資料彙整之後再編譯出來。

差別在於Vite只會將有修改的地方編譯，再透過import的方式匯入。而Webpack則是會完整重新編譯。所以Vite的速度會較快。

Vite創建Vue專案​

npm指令​

官方文件有提供npm指令，可以依照不同的nodejs版本以及需要的模板需求，去創建專案。

如果nodejs的版本較新，可以使用以下指令創建Vue：

npm create vite@latest

如果nodejs的版本較舊，官方也提供以下指令：

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
首次執行指令

可能會跳出提示，希望安裝相依套件

Need to install the following packages:
create-vite@5.0.0
Ok to proceed? (y) y

專案名稱​

預設專案名稱為vite-project，可以依照自己需求命名

? Project name: › vite-project

選擇框架​

接著選擇框架，這邊我們選擇Vue。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

選擇TS或JS或自訂​

在選擇完框架為Vue後，會詢問是否要使用Typescript，這邊先選擇JS就好

後續會使用create-vue（也是官方所推薦的方式）套用其他的plugin

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   JavaScript
    Customize with create-vue ↗
    Nuxt ↗

執行畫面​

Scaffolding project in /Users/....../vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

根據提示，我們需要進到資料夾中，透過npm安裝相關的套件。

並且使用npm run dev開啟開發模式的執行畫面。

npm run dev

執行npm run dev

Create Vue​

前面介紹了使用Vite創建Vue專案，但是在創建過程中並沒有選項讓我們可以選擇使用vue router等等其他相依工具。

所以我們需要使用create vue方式來選擇我們所需要的套件。

info

從官方文件中提到，我們可以使用以下指令來使用Create vue：

npm create vue@latest

Vite​

或是這邊我們直接使用vite後續搭配create vue選項的方式來創建

npm create vite@latest

同樣的，選擇專案名稱：

? Project name: › vite-project

選擇框架：

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

首次安裝可能會跳出提醒，要我們安裝相依的套件：

Need to install the following packages:
create-vue@3.9.0
Ok to proceed? (y) y

選擇使用create-vue創建專案

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    JavaScript
❯   Customize with create-vue ↗
    Nuxt ↗

Create Vue​

Vue.js - The Progressive JavaScript Framework

? Add TypeScript? › No / Yes

選擇不使用TypeScript

? Add JSX Support? › No / Yes

不需要使用JSX

? Add Vue Router for Single Page Application development? › No / Yes

選擇Yes，有需要使用到Vue Router

? Add Pinia for state management? › No / Yes

選擇Yes，會用到Pinia狀態管理工具

? Add Vitest for Unit Testing? › No / Yes

選擇No，沒有需要撰寫元件測試

? Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit.
❯   No
    Cypress
    Nightwatch
    Playwright

No，不需要安裝測試套件。

? Add ESLint for code quality? › No / Yes

Yes，需要安裝ESLint確保程式碼品質。

? Add Prettier for code formatting? › No / Yes

Yes，讓我們可以透過Prettier調整程式碼排版。

caffolding project in /Users/.../vite-project...

Done. Now run:

  cd vite-project2
  npm install
  npm run format
  npm run dev
package.json:script
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

修改router mode​

使用create-vue預設的router history mode不會加上井字號(#)，這種模式是需要做額外設定的。

所以我們這邊需要打開router/index.js修改設定如下：

import { createRouter, createWebHashHistory } from 'vue-router'
// 原本設定為：
// import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
// 原本設定為：
// history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router